<template>
  <CDialog
    :visible="resetPwdVisible"
    :title="type === 'update' ? '重置密码' : '删除商户'"
    type="add"
    width="630px"
    @submit="handleSubmit"
    @cancel="handleCancel"
  >
    <div v-if="type === 'update'">
      您确定需要将用户 {{ merchantName }} 的密码重置为user_123456吗？
    </div>
    <div v-else-if="type === 'remove'">
      <div class="merchant-detail-dlg__confirm">确定删除该用户?</div>
      <table class="merchant-detail-dlg__table">
        <tbody>
          <tr>
            <td>用户名</td>
            <td>手机号</td>
          </tr>
          <tr>
            <td>{{ merchantName }}</td>
            <td>{{ merchantMobile }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </CDialog>
</template>
<script>
import CDialog from '@/components/CDialog'
import { removeMerchant, resetMerchantPassword } from '@/api/user'
import md5 from 'md5'

export default {
  name: 'resetPwdDlg',
  components: { CDialog },
  props: {
    type: {
      required: true,
      type: String,
    },
    resetPwdVisible: {
      required: true,
      type: Boolean,
    },
    merchantId: {
      required: true,
      type: String,
    },
    merchantName: {
      default: '',
      type: String,
    },
    merchantMobile: {
      default: '',
      type: String,
    },
  },
  methods: {
    handleSubmit() {
      if (this.type === 'remove') {
        removeMerchant({
          id: parseInt(this.merchantId),
        }).then(() => {
          this.$message({
            type: 'success',
            showClose: true,
            message: '删除成功',
          })
          this.$emit('update:resetPwdVisible', false)
          this.$router.push('/user/list')
        })
      } else if (this.type === 'update') {
        resetMerchantPassword({
          id: this.merchantId,
          newPassword: md5('user_123456'),
        }).then(() => {
          this.$message({
            type: 'success',
            showClose: true,
            message: '修改成功',
          })
          this.$emit('update:resetPwdVisible', false)
        })
      }
    },
    handleCancel() {
      this.$emit('update:resetPwdVisible', false)
    },
  },
}
</script>
<style lang="scss" scoped>
.merchant-detail-dlg__table {
  width: 100%;
  border-collapse: collapse;
  tr {
    height: 40px;
    text-align: center;
    &:first-child {
      background: #f4f2f8;
      font-size: bold;
    }

    td {
      border: 1px solid #ddd;
    }
  }
}

.merchant-detail-dlg__confirm {
  font-size: 18px;
  text-align: center;
  padding-bottom: 10px;
}
</style>
